<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网格布局</title>
		<style>
			.grid-container div{
				/* border: 1px solid red ; */
				background-color: aquamarine;
			}
			.grid-container{
				display: grid;
				grid-template-areas: 
				'header header header header header header'
				'menu main main main right right'
				'menu footer footer footer footer footer'
				;
				grid-gap: 10px;
				background-color: aqua;
				padding: 10px;
				
			}
			.item1{
				grid-area: header;
			}
			.item2{
				grid-area: menu;
			}
			.item3{
				grid-area: main;
			}
			.item4{
				grid-area: right;
			}
			.item5{
				grid-area: footer;
			}
			
		</style>
	</head>
	<body>
		<div class="grid-container">
			<div class="item1">header</div>
			<div class="item2">菜单</div>
			<div class="item3">左侧</div>
			<div class="item4">右侧</div>
			<div class="item5">页脚</div>
			
			
		</div>
		
		
		
	</body>
</html>